<script setup>
import { ref, onMounted } from 'vue'
import { goService, goCommunity } from "../../tools/go";

// 初始化 activeItem 为 '我要建议'
const activeItem = ref('我要建议')

// 控制建议类型选择器的显示
const showTypeSelector = ref(false)

// 建议类型列表
const suggestionTypes = [
  '1.设施建议',
  '2.环境建议',
  '3.服务建议',
  '4.安全建议',
  '5.其他建议'
]

// 当前选中的建议类型
const selectedType = ref('1.设施建议')

// 显示/隐藏建议类型选择器
const toggleTypeSelector = () => {
  showTypeSelector.value = !showTypeSelector.value
}

// 选择建议类型
const selectType = (type) => {
  selectedType.value = type
  showTypeSelector.value = false
}

// 来源页面
const fromPage = ref('service')

// 返回函数
const goBack = () => {
  if (fromPage.value === 'community') {
    goCommunity()
  } else {
    goService()
  }
}

// 在组件挂载时获取来源页面参数
onMounted(() => {
  const query = window.location.search
  const urlParams = new URLSearchParams(query)
  const from = urlParams.get('from')
  if (from) {
    fromPage.value = from
  }
})

// 存储上传的图片路径
const uploadedImages = ref(['', ''])

// 选择图片
const selectImg = (index) => {
  let input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.onchange = (e) => {
    if (e.target.files && e.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (event) => {
        // 设置图片到对应位置
        uploadedImages.value[index] = event.target.result;

        // 如果上传了第二张图片且只有2个格子，添加第三个
        if (index === 1 && uploadedImages.value.length === 2) {
          uploadedImages.value.push('');
        }
        // 如果上传了第三张图片且只有3个格子，添加第四个
        else if (index === 2 && uploadedImages.value.length === 3) {
          uploadedImages.value.push('');
        }
      };
      reader.readAsDataURL(e.target.files[0]);
    }
  }
  input.click();
}

// 控制提交成功弹窗的显示
const showSuccessModal = ref(false)

// 控制错误提示的显示
const showError = ref(false)

// 存储建议列表
const suggestionList = ref([])

// 提交建议
const submitSuggestion = () => {
  const suggestionContent = document.querySelector('textarea').value.trim();

  // 检查建议内容是否为空
  if (!suggestionContent) {
    showError.value = true;
    setTimeout(() => {
      showError.value = false; // 3秒后隐藏错误提示
    }, 3000);
    return; // 如果为空，直接返回，不执行后续逻辑
  }

  // 模拟提交成功
  showSuccessModal.value = true;

  // 将建议内容添加到建议列表中
  const suggestion = {
    type: selectedType.value,
    content: suggestionContent,
    images: uploadedImages.value.filter(img => img !== ''),
  };
  suggestionList.value.push(suggestion);

  // 清空表单
  selectedType.value = '设施建议';
  document.querySelector('textarea').value = '';
  uploadedImages.value = ['', ''];
}

// 关闭弹窗
const closeModal = () => {
  showSuccessModal.value = false
}
</script>

<template>
  <!-- 灰色蒙层 -->
  <div v-if="showSuccessModal || showTypeSelector" class="overlay" @click="closeModal"></div>

  <view class="titli">
    <v-icon @click="goCommunity" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>投诉建议</h3>
  </view>

  <!-- 导航 -->
  <view class="content">
    <ul class="nav">
      <li @click="activeItem = '我要建议'" :class="{ active: activeItem === '我要建议' }">
        <view class="nav-one">
          <text>我要建议</text>
        </view>
      </li>
      <li @click="activeItem = '建议列表'" :class="{ active: activeItem === '建议列表' }">
        <view class="nav-two">
          <text>建议列表</text>
        </view>
      </li>
    </ul>

    <!-- 建议表单 -->
    <ul class="compalintslist" v-if="activeItem === '我要建议'">
      <li>
        <view>
          <text>建议类型：</text>
          <text>{{ selectedType }}</text>
        </view>
        <v-icon class="icon" icon="mdi-chevron-right" @click="toggleTypeSelector"></v-icon>
      </li>

      <!-- 建议类型选择器 -->
      <div v-if="showTypeSelector" class="type-selector">
        <ul>
          <li
              v-for="(type, index) in suggestionTypes"
              :key="index"
              @click="selectType(type)"
              :class="{ active: type === selectedType }"
          >
            {{ type }}
          </li>
        </ul>
      </div>

      <li>
        <view style="display: flex;">
          <text>建议房号：</text>
          <input type="text" placeholder="请输入建议房号">
        </view>
      </li>

      <li style="display: flex; justify-content: flex-start; align-items: flex-start; border: none">
        <text>建议内容：</text>
        <textarea
          v-model="suggestionContent"
          placeholder="请输入建议内容"
          placeholder-style="color:#999999"
          placeholder-class="textarea"
      />
      </li>
      <!-- 错误提示 -->
      <view v-if="showError" class="error-message">
        <p>建议内容或房号不能为空</p>
      </view>
    </ul>

    <!-- 上传图片 -->
    <view class="upload" v-if="activeItem === '我要建议'">
      <view class="text">
        <text>上传图片</text>
        <text>请输入图片</text>
      </view>
      <view class="inp">
        <view
            v-for="(image, index) in uploadedImages"
            :key="index"
            class="up"
            @click="selectImg(index)"
            :style="index === 1 ? 'margin: 10px 10px;' : ''"
        >
          <img v-if="image" :src="image" style="width: 100%; height: 100%; object-fit: cover;" />
          <view v-else></view>
        </view>
      </view>
    </view>

    <!-- 建议列表 -->
    <ul class="compalintslist" v-if="activeItem === '建议列表'">
      <li v-for="(suggestion, index) in suggestionList" :key="index">
        <view>
          <text>建议类型：{{ suggestion.type }}</text>
          <text>建议内容：{{ suggestion.content }}</text>
          <div v-for="(img, imgIndex) in suggestion.images" :key="imgIndex">
            <img :src="img" style="width: 100px; height: 100px; object-fit: cover;" />
          </div>
        </view>
      </li>
    </ul>
  </view>

  <!-- 提交按钮 -->
  <view class="submit">
    <button>电话建议</button>
    <button @click="submitSuggestion">提交建议</button>
  </view>

  <!-- 提交成功弹窗 -->
  <div v-if="showSuccessModal" class="success-modal">
    <div class="modal-content">
      <p>提交成功</p>
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 提交成功弹窗
.success-modal {
  position: fixed;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 20;
    text-align: center;
    width: 250px;
    height: 150px;
    align-items: center;
    justify-content: center;
  .modal-content {
    p {
      font-size: 19px;
      margin-bottom: 20px;
    }

    button {
      width: 200px;
      line-height: 60px;
      text-align: center;
      height: 60px;
      background: #F7604B;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
// 灰色蒙层
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 5;
}

//submit
.submit{
  button{
    width: 50%;
    height: 50px;
    border-radius: 8px;
    background: #F7604B;
    text-align: center;
    color: #FFFFFF;
    margin: 0 10px;
    line-height: 50px;
  }
  position: fixed; /* 固定定位 */
  bottom: 0;       /* 距离底部 0 */
  left: 0;         /* 距离左侧 0 */
  right: 0;        /* 距离右侧 0 */
  display: flex;   /* 水平排列按钮 */
  justify-content: space-around; /* 按钮间距均匀 */
  padding: 10px;   /* 内边距 */
  width: 100%;
  background: #FAF9FE;
}
//
.content {
  //上传图片
  .upload {

    .inp{
      .up:nth-child(2){
        margin: 10px 10px;
      }
      display: flex;
      flex-wrap: wrap;
    }
    .up{
      input{
        width: 100%;
        height: 100%;
      }
      view::before{
        content: '';
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: rotate(90deg);
        width: 2px;
        height: 50px;
        background: #CACACA;
      }
      view{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 50px;
        background: #CACACA;
      }
      position: relative;
      width: 100px;
      height: 100px;
      border: 2px solid #CACACA;
      margin-top: 10px;
    }
    //文字
    .text{
      text:nth-child(2){
        color: #CACACA;
      }
      text{
        font-size: 17px;
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    width: 100%;
    padding: 12px;
    background: #FFFFFF;
  }
  .error-message {
    width: 200px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffebee;
    color: #c62828;
    padding: 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 30;
  }
  //建议列表
  .compalintslist {
    li{

      textarea{
        width: 79%;
        height: 111px;
        border: 1px solid #000;
        border-radius: 12px;
      }
      .icon{
        color: #CACACA;
        font-size: 30px;
      }
      view{

        text:nth-child(2){
          color: #007aff;
        }
        text{
          font-size: 17px;
        }
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      border-bottom: 3px solid #CACACA;
      padding: 12px;
    }
    width: 100%;
    //height: 80vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  // 建议类型选择器
  .type-selector {
    &::before{
      content: '';
      position: absolute;
      top: -10px;
      right: 20px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #FFFFFF;
    }
    position: absolute;
    top: 50px;
    left: 200px;
    width: 200px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 20;
    border-radius: 8px;
    
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      
      li {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F0F0;
        color: #333;
        cursor: pointer;
        text-align: left;
        display: block;
        width: 100%;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background: #F9F9F9;
        }
        
        &.active {
          color: #E07320;
        }
      }
    }
  }
  //nav
  .nav {
    li {
      flex: 1;
      cursor: pointer; /* 添加鼠标指针样式 */
      color: #CACACA;
      &.active {
        color: #E07320;
        font-weight: 500;
        height: 50px;
        border-bottom: 4px solid #E07320;
      }
      .nav-one,
      .nav-two {
        height: 50px;
        text-align: center;
        line-height: 50px;
        text {
          font-size: 18px;
          font-weight: 500;
        }
      }

    }
    width: 100%;
    height: 50px;
    display: flex;
    border-bottom: 5px solid #CACACA;
  }
  width: 100%;
}
//标题
.titli {
  h3 {
    font-weight: 300;
    color: #000000;
    text-align: center;
  }
  .icon {
    position: absolute; /* 将 icon 脱离文档流 */
    left: 10px;
    font-size: 30px;
  }
  position: relative; /* 父容器设置为相对定位 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%;
  height: 8vh;
  background: #FFFFFF;
}
body {
  background: #FAF9FE;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
</style>